<template>
  <div class="home card">
    <!--    <img class="home-bg" src="@/assets/images/welcome3.png" alt="welcome" />-->
    <grid-layout :layout.sync="layout"
                 :col-num="12"
                 :row-height="30"
                 :is-draggable="draggable"
                 :is-resizable="resizable"
                 :responsive="false"
                 :vertical-compact="false"
                 :prevent-collision="true"
                 :use-css-transforms="true"
    >
      <grid-item v-for="item in layout"
                 :static="item.static"
                 :x="item.x"
                 :y="item.y"
                 :w="item.w"
                 :h="item.h"
                 :i="item.i"
      >
        <span class="text">{{ item.i }}</span>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script setup name="home">

import {reactive} from "vue";

const layout =  reactive([
  {"x": 0, "y": 0, "w": 2, "h": 2, "i": "1", static: false},
  {"x": 2, "y": 0, "w": 2, "h": 2, "i": "2", static: false},
  {"x": 3, "y": 0, "w": 2, "h": 2, "i": "3", static: false},
  {"x": 8, "y": 0, "w": 2, "h": 2, "i": "4", static: false},

])

const draggable = ()=>{

}
const resizable = ()=>{

}

</script>

<style scoped lang="scss">
@import "index";
</style>
